<template>
  <div v-if='articleList'>
    <!--文章展示区域-->
    <el-card shadow='always' v-for='item in articleList' :key='item.id'>
      <div class='user'>
        <el-avatar :size='30' :src='item.user.headimg'></el-avatar>
        <div class='user-info'>
          <!--昵称-->
          <a href='./' class='nickname'>{{ item.user.nick }}</a>
          <!--等级-->
          <a href='./'>
            <el-tag class='lv' size='mini' effect='dark' v-text="'LV.' + item.user.lv"></el-tag>
          </a>
          <!--时间-->
          <time class='time' v-text='$date.diffTime(item.creat_time)'></time>
        </div>
      </div>
      <div class='cloudN-content-pre'>
        <!--标签-->
        <el-tag size='mini' type='primary' effect='dark' class='cloudN-content-head-tag' v-show='item.content.tag_name'>
          {{ item.content.tag_name }}
        </el-tag>
        <!--正文标题-->
        <router-link :to="{ name: 'essay',query: {articleid:item.content.article_id}}"
                     @click='viewArticle(item.content.article_id)'>
          <h1 :title='item.title' :class="['cloudN-content-head', item.content.tag_name === '' ? 'noneHeadTag' : '']">
            {{ item.content.title }}
          </h1>
        </router-link>
      </div>
      <a :href="'/essay/content' + '?articleid=' + item.content.article_id"
         @click='viewArticle(item.content.article_id)'>
        <!--正文内容-->
        <div class='cloudN-center-content-text'>{{ item.content.part_content }}</div>
      </a>
      <!--图片展示区域-->
      <div style='display: flex' :class='{ multy: item.content.image.length === 3 }'>
        <div v-for='(img, index) in item.content.image' :key='index'>
          <el-image class='cloudN-content-text-pic' v-if='index < 4' :src='img' fit='contain'
                    :preview-src-list='item.content.image'>
            <!--加载中-->
            <div slot='placeholder' class='cloudN-content-text-pic-status'>
              <i class='el-icon-loading'></i>
            </div>
            <!--加载失败-->
            <div slot='error' class='cloudN-content-text-pic-status'>
              <i class='el-icon-picture-outline'></i>
            </div>
          </el-image>
        </div>
      </div>
      <div class='more-content-pic'>
        <font-awesome-icon :icon="['far', 'clone']"></font-awesome-icon>
        <span>+13</span>
      </div>
      <!--文章底部操作区域-->
      <div :class="['cloudN-content-tag-operators', item.content.custom_tag === null ? 'active' : '']">
        <!--标签区域-->
        <div class='cloudN-tag' v-show='item.content.custom_tag !== null'>
          <el-tag class='customLabel' type='info' size='mini' v-for='(tag, index) in item.content.custom_tag'
                  :key='index'>{{ tag }}
          </el-tag>
        </div>
        <!--显示观看人数，点赞人数，评论人数区域-->
        <div class='operators'>
          <div>
            <font-awesome-icon :icon="['far', 'eye']" style='width:16px;height: 16px'></font-awesome-icon>
            <span>{{ item.article_opeartor.view_count }}</span>
          </div>
          <div>
            <font-awesome-icon @click="goComment('/essay/content' + '?articleid=' + item.content.article_id)"
                               :icon="['far', 'comment-dots']" style='width:16px;height: 16px'></font-awesome-icon>
            <span>{{ item.article_opeartor.comment_count }}</span>
          </div>
          <div>
            <font-awesome-icon v-if='!item.article_opeartor.isLike' @click='like(item.content.article_id)'
                               :icon="['far', 'thumbs-up']" style='width:16px;height: 16px'></font-awesome-icon>
            <font-awesome-icon v-else @click='like(item.content.article_id)' :icon="['far', 'thumbs-up']"
                               style='width:16px;height: 16px;color: #00c3ff'></font-awesome-icon>
            <span>{{ item.article_opeartor.fabulous_count }}</span>
          </div>
        </div>
      </div>
    </el-card>
    <el-card shadow='always'>
      <div class='loadmore' @click='loadmore()'>
        加载更多
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'

export default {
  data: () => ({}),
  created () {
    this.clearArticleList()
  },
  // DOM对象加载完成时
  mounted () {
  },
  methods: {
    ...mapMutations('HomePage', {
      setArticleActionList: 'setArticleActionList',
      InitArticleList: 'InitArticleList',
      subArticleActionListFabulousCount: 'subArticleActionListFabulousCount',
      addArticleActionListFabulousCount: 'addArticleActionListFabulousCount',
      reverseArticleActionListConfigFabulousCount: 'reverseArticleActionListConfigFabulousCount',
      clearArticleList: 'clearArticleList'
    }),
    // 点赞、取消赞
    like: function (articleId) {
      var data = {}
      // 去articleActionList找到对应的articleId,找到后将文章id，是否点赞
      // console.log(this.articleActionList)
      this.articleActionList.forEach(item => {
        if (item.id === articleId) {
          data.articleId = item.id
          data.operation = item.isLike ? 1 : 0
        }
      })
      const url = this.$config.urls.get('like_behavior')
      this.$memory
        .getEquipmentId()
        .then(equipmentId => {
          return new Promise((resolve, reject) => {
            this.$http
              .post(url, {
                equipment_id: equipmentId,
                article_id: data.articleId,
                type: 0,
                operation: data.operation
              })
              .then(d => {
                resolve(d)
              })
              .catch(e => {
                reject(e)
              })
          })
        })
        .catch(e => {
          return new Promise((resolve, reject) => {
            reject(e)
          })
        })
        .then(d => {
          if (d.data.code === 0) {
            if (data.operation === 1) {
              this.subArticleActionListFabulousCount(data.articleId)
            } else {
              this.addArticleActionListFabulousCount(data.articleId)
              this.getLikeExperience()
            }
            this.reverseArticleActionListConfigFabulousCount(data.articleId)
          } else {
            console.log(d)
            this.$message.error(d.data.error_message)
          }
        })
        .catch(e => {
          console.log(e)
        })
    },
    // 点赞经验
    getLikeExperience () {
      this.$memory.getUser().then(userString => {
        if (userString === null) {
          return
        }
        const user = JSON.parse(userString)
        // console.log(user)
        var id = user.id
        console.log(id)
        const url = this.$config.urls.get('fabulous_experience') + id
        this.$http.get(url).then(res => {
          if (res.data.code !== 0) {
            this.$message.warning(res.data.error_message)
          }
        })
      })
    },
    // 评论
    goComment (href) {
      this.$router.push(href)
      // this.sleep(1000)
      setTimeout(function () {
        document.querySelector('.article-operator-report').scrollIntoView({
          behavior: 'smooth', // 平滑过渡
          block: 'start' // 上边框与视窗顶部平齐
        })
      }, 200)
    },
    // 点击文章事件
    viewArticle (Param) {
      var url = this.$config.urls.get('view_article_behavior')
      return this.$memory
        .getEquipmentId()
        .then(equipmentId => {
          return new Promise((resolve, reject) => {
            this.$http
              .post(url, {
                equipment_id: equipmentId,
                article_id: Param,
                is_click: 1
              })
              .then(d => {
                if (d.code === 0) {
                  console.log('观看成功')
                }
                // console.log(ids)
                resolve(d)
              })
              .catch(e => {
                reject(e)
              })
          })
        })
        .catch(e => {
          return new Promise((resolve, reject) => {
            reject(e)
          })
        })
    },
    loadmore () {
      // console.log(this.$parent)
      this.$emit('loadmore')
    }
  },
  computed: {
    ...mapGetters('HomePage', { articleActionList: 'articleActionList', articleList: 'articleList' })
  },
  destroyed () {
  },
  watch: {},
  name: 'articleDisplay'
}
</script>

<style lang='less' scoped>
.user {
  display: flex;

  .user-info {
    padding-top: 4px;

    .nickname {
      font-family: '微软雅黑', Arial, sans-serif;
      font-size: 14px;
      font-weight: 550;
      letter-spacing: -1px;
      color: #999999;
      margin-left: 5px;
    }

    .lv {
      margin: 0 8px;
      background-color: #ffbf00;
      border-color: #ffbf00;
    }

    .time {
      color: #999999;
    }
  }
}

.cloudN-content-head-tag {
  font-size: 12px;
  margin-left: 0;
}

.cloudN-content-head {
  display: inline;
  font-size: 15px;
  line-height: 20px;
  font-weight: 900;
  font-family: '微软雅黑', Arial, sans-serif;
  color: #303133;
}
.cloudN-content-head:hover{
  color: #00c3ff;
}
.cloudN-content-text-pic {
  width: 220px;
  height: 135px;
}

.multy {
  justify-content: space-between;
}

.cloudN-content-text-pic-status {
  display: flex;
  justify-content: space-around;

  .el-icon-picture-outline {
    font-size: 100px;
    color: #999;
    transform: translateY(15%);
  }
}

.more-content-pic {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  top: 100px;
  right: 15px;
  //background-color: #999999;
  padding: 2px;
  color: #fff;
  border-radius: 15%;
}

.noneHeadTag {
  margin-left: 0;
}

.active {
  display: flex;
  justify-content: flex-end;
}

.operators {
  display: flex;
  color: #999999;

  div {
    margin: 0 5px;
  }

  span {
    margin-left: 5px;
  }
}

.el-tag--mini {
  height: 20px;
  padding: 0 2px;
  line-height: 19px;
}

.loadmore {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: flex;
  justify-content: center;
  color: #999999;
  cursor: pointer;
}
</style>
